<template>
  <b-page class="group-manage" :load="!loading">
    <div class="table-page-search-wrapper">
      <a-row :gutter="48">
        <a-col :md="12">
          群聊名称
          <a-input
            v-model="queryParam.keyword"
            placeholder=""
            allowClear
            style="margin-right: 8px;width: 200px;"/>
          <a-button class="ml-10" type="primary" @click="getData">查询</a-button>
        </a-col>
        <a-col :md="12">
          <div style="display: flex;justify-content: flex-end;align-items: center">
            <b-button btn-content="从企业微信导入" @click="updateKhgl" :loading="exportLoading"/>
            <a :href="url">
              <b-button btn-content="导出Excel"/>
            </a>
          </div>
        </a-col>
      </a-row>
      <div class="update-desc-state d-jcc-aic" v-if="exportLoading">
        <div style="height: 20px"> 正在从企业微信导入，请等待...</div>
        <div class="material-icons desc-state-icon">autorenew</div>
      </div>
    </div>

    <a-table
      rowKey="id"
      :pagination="pagination"
      :columns="columns"
      :data-source="dataList"
      @change="handleTableChange"
    >
      <span slot="nickname" slot-scope="text, record">
        <div class="d-aic">
          <div>
            <img class="user-avatar" :src="record.headImgUrl">
          </div>
          <div class="ml-10">
            <div class="remark-name">{{ record.remarkName }}</div>
            <div class="nickname-diy">昵称：{{ record.nickname }}</div>
          </div>
        </div>
      </span>
      <span slot="gender" slot-scope="text, record">
        {{ !record.gender?'未知':record.gender===1?'男':'女' }}
      </span>
      <span slot="tag" slot-scope="text, record" class="d-aic">
        <span class="tag-item-style d-jcc-aic" v-for="(item,index) in record.tagList" :key="index">{{ item }}</span>
      </span>
      <span slot="groupCreateTime" slot-scope="text, record">
        {{ getTime(record.groupCreateTime * 1000) }}
      </span>
      <template slot="leaveStatusTitle">
        <span>流失率</span>
        <a-tooltip placement="top">
          <template slot="title">
            <div>被动删除：客户删除成员</div>
            <div>主动删除：成员删除客户</div>
          </template>
          <a-icon style="margin-left: 10px" type="exclamation-circle"/>
        </a-tooltip>
      </template>
      <span slot="leaveStatus" slot-scope="text, record">
        {{ !record.leaveStatus?'未流失':record.leaveStatus===1?'被动删除':'主动删除' }}
      </span>
      <span slot="id" slot-scope="text, record">
        <a-button type="link" @click="gotoDetail(record.groupChatId)">详情</a-button>
      </span>
    </a-table>
  </b-page>
</template>

<script>
    import { STable } from '@/components'
    import API from '@/api/group'
    import storage from 'store'
    import { ACCESS_TOKEN } from '@/store/mutation-types'

    export default {
        name: 'GroupManage',
        components: {
            STable
        },
        data () {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10 // 每页中显示10条数据
                },
                // 高级搜索 展开/关闭
                loading: false,
                // 查询参数
                queryParam: {
                    keyword: ''
                },
                // 表头
                columns: [
                    {
                        title: '群名称',
                        dataIndex: 'name'
                    },
                    {
                        title: '群主',
                        width: '100px',
                        dataIndex: 'groupName'
                    },
                    {
                        title: '群人数',
                        width: '100px',
                        dataIndex: 'groupNum',
                        scopedSlots: { title: 'groupNumTitle', customRender: '' }
                    },
                    {
                        title: '今日入群',
                        width: '100px',
                        dataIndex: 'todayJoin',
                        scopedSlots: { title: 'todayJoinTitle' }
                    },
                    {
                        title: '今日退群',
                        width: '100px',
                        dataIndex: 'todayExit',
                        scopedSlots: { title: 'todayExitTitle' }
                    },
                    {
                        title: '创建时间',
                        width: '200px',
                        scopedSlots: { customRender: 'groupCreateTime' }
                    },
                    {
                        title: '操作',
                        scopedSlots: { customRender: 'id' }
                    }
                ],
                dataList: [],
                url: null,
                exportLoading: false
            }
        },
        computed: {
            qwUserId () {
                return this.$store.state.user.info.qwUserId
            }
        },
        mounted () {
            this.getData()
            this.getUrl()
            this.checkRunningSyncTask()
        },
        methods: {

            checkRunningSyncTask () {
                API.checkRunningSyncGroup({ qwUserId: this.qwUserId }).then(res => {
                    if (this.exportLoading && !res.synchronizing) {
                        this.$message.success(`导入完成`)
                        this.exportLoading = false
                        this.getData()
                    }
                    if (res.synchronizing) {
                        setTimeout(() => {
                            this.checkRunningSyncTask()
                        }, res.remaining + 2000)
                    }
                })
            },
            /**
             *构建群列表导出名单链接
             */
            getUrl () {
                const token = storage.get(ACCESS_TOKEN)
                this.url = 'qw/group/importGroup?qwUserId=' + this.qwUserId + '&access_token=' + token
            },
            getData () {
                API.pageGroup(Object.assign({
                    current: this.pagination.current,
                    size: this.pagination.pageSize,
                    qwUserId: this.qwUserId
                }, this.queryParam))
                    .then(res => {
                        res.records.forEach(item => {
                            item.tagList = []
                            if (item.tag) {
                                item.tagList = item.tag.split(',')
                            }
                        })
                        this.dataList = res.records
                        this.pagination.current = res.current
                        this.pagination.total = res.total
                        this.loading = true
                    }).catch(() => {
                    this.loading = true
                })
            },
            handleTableChange (pagination) {
                this.pagination.current = pagination.current
                this.pagination.pageSize = pagination.pageSize
                this.getData()
            },
            updateKhgl () {
                if (this.exportLoading) {
                    this.$message.warning(`正在导入，请等待。。。`)
                    return
                }
                this.exportLoading = true
                API.updateData({ qwUserId: this.qwUserId }).then(res => {
                    this.exportLoading = true
                    this.$message.warning(`正在同步，请等待。。。`)
                    setTimeout(() => {
                        this.checkRunningSyncTask()
                    }, 5000)
                })
            },
            gotoDetail (customerId) {
                this.$emit('onEdit', customerId)
            },
            getTime (time) {
                return time ? this.$Utils.getTimeFormat(time).substring(0, 16) : ''
            }
        }
    }
</script>

<style scoped lang="less">
    .group-manage {
        .select-state {
            font-size: 14px;
            color: #101010;
        }

        .table-page-search-wrapper {
            position: relative;
            padding-bottom: 30px;
            border-bottom: 1px solid #D9D9D9;

            .update-desc-state {
                position: absolute;
                right: 0;
                bottom: 0;
                height: 30px;
                font-size: 12px;
                color: #52C41A;

                .desc-state-icon {
                    margin-left: 8px;
                    font-size: 20px;
                    animation: syncAnimal 1.5s forwards infinite;
                }
            }
        }

        .nickname-diy {
            font-size: 14px;
            color: #9f9f9f;
        }

        .remark-name {
            font-size: 14px;
            line-height: 26px;
            color: rgba(0, 0, 0, .65);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .ml-10 {
            margin-left: 10px;
        }

        .tag-item-style {
            max-width: 100px;
            margin: 0 8px 4px 0;
            padding: 0 7px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #f5222d;
            background: #fff1f0;
            border: 1px solid #ffa39e;
        }
    }

    .tag-item {
        height: 32px;
        line-height: 32px;
    }

    .add-tag-btn {
        height: 32px;
        margin-right: 20px;

        &.active {
            border: 1px solid #ff5f5f;
        }
    }

    .tag-group-name {
        min-width: 80px;
    }

</style>
